import React, { useState, useEffect } from 'react';
import { Dimensions } from 'react-native';

// 获取屏幕宽度
const { width,height } = Dimensions.get('window');

// 设计稿的宽度，假设为 750px
const baseWidth = 375;
const baseHeight = 667;

// 动态计算屏幕宽度比例并实时更新
const useRem = () => {
  const [scale, setScale] = useState({ width: width / baseWidth, height: height / baseHeight }); // 初始化比例

  useEffect(() => {
    const handleResize = () => {
      const { width, height } = Dimensions.get('window');
      setScale({ width: width / baseWidth, height: height / baseHeight }); // 更新比例
    };

    // 监听窗口尺寸变化
    Dimensions.addEventListener('change', handleResize);

    // 初始执行一次计算
    handleResize();

    // 清理监听
    return () => {
      Dimensions.removeEventListener('change', handleResize);
    };
  }, []); // 空依赖数组，确保只在首次渲染时执行

  // 根据比例计算 rem 单位（1rem = 100px）
  const rem = (value) => {
    return value * scale.width;
  };
  // 添加一个 remh 函数，用于计算高度比例
  const remh = (value) => {
    return value * scale.height; // 根据高度比例计算
  };

  return { rem, remh };
};

export default useRem;
